<template>
	<view class="index">
		<!-- 顶部导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<navBar title="博客首页" :home="true"></navBar>
		<!-- #endif -->

		<!-- 搜索框 -->
		<u-search placeholder="搜索" v-model.trim="keyword" margin="10px" shape="square" :showAction="false"
			@search="search"></u-search>

		<!-- 选项卡 -->
		<u-tabs :current="current" :list="classifyList" @change="tabsCurrentChange" keyName="classifyName"></u-tabs>

		<!-- 分割线 -->
		<u-divider></u-divider>

		<!-- 轮播图 -->
		<swiper :current="current" @change="swiperCurrentChange" :style="'height:' + (height + 60) + 'px'">
			<swiper-item v-for="(item,index) in classifyList" :key="index">
				<view class="swiper-item">
					<!-- 如何处理每个瀑布流的数据？怎样保证数据的独立？ -->
					<u-waterfall v-model="blogRenderList[index]" ref="waterfall" class="waterfall">
						<template v-slot:left="{leftList}">
							<view class="blog-item" v-for="(item, index) in leftList" :key="index" @click="jump(item)">
								<image @load="imageLoaded" :src="item.Blog.cover" mode="widthFix"></image>
								<view class="blog-title">{{item.Blog.title}}</view>
								<view class="blog-author">{{item.Blog.userName}}</view>
							</view>

						</template>
						<template v-slot:right="{rightList}">
							<view class="blog-item" v-for="(item, index) in rightList" :key="index" @click="jump(item)">
								<image @load="imageLoaded" :src="item.Blog.cover" mode="widthFix"></image>
								<view class="blog-title">{{item.Blog.title}}</view>
								<view class="blog-author">{{item.Blog.userName}}</view>
							</view>
						</template>
					</u-waterfall>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getClassify,
		getBlogByClassify
	} from '@/config/api.js'

	export default {
		data() {
			return {
				keyword: "",
				//	当前选项卡所处的下标
				current: 0,
				//	选项卡分类列表
				classifyList: [],
				//	文章渲染列表
				blogRenderList: [],
				//	轮播图的高度
				height: 0,
			}
		},
		onLoad() {
			this.initClassify()
		},
		onPullDownRefresh() {
			this.current = 0
			//	将页面的数据进行更新，更新前，先将原始数据清空
			//	通过 refs 获取所有的 waterfall，再遍历去执行每个 waterfall 里的 clear 函数，清空瀑布流里的数据
			this.$refs.waterfall.forEach(vc => vc.clear())
			this.blogRenderList = []
			this.initClassify()

			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			tabsCurrentChange(e) {
				this.current = e.index
			},
			swiperCurrentChange(e) {
				this.current = e.detail.current

				//	重新获取当前分类下的瀑布流高度
				this.imageLoaded()

				//	判断当前分类下是否存在数据？如果存在，就无需再请求了
				if (this.blogRenderList[this.current]) return

				//	用于请求当前分类所对应的博客数据
				//		需要当前分类的 ID
				const currentClassifyId = this.classifyList[this.current].id
				this.initBlogByClassify(currentClassifyId)
			},
			//	初始化分类数据
			async initClassify() {

				const classify = await getClassify()
				console.log(classify);
				this.classifyList = classify.data.rows

				//	由于是第一次加载数据，需要默认将分类的第一项博客数据进行加载
				this.initBlogByClassify(this.classifyList[0].id)
			},
			async initBlogByClassify(id) {
				const blogs = await getBlogByClassify(id)

				//	在 Vue2 响应式中，不是任何操作都能引起视图发生改变（更新）
				//		通过数组的下标去修改数组的成员
				//	解决方案：原生 Vue 可以使用 Vue.set 去触发视图更新，uniApp 中可以使用 this.$set 触发更新

				this.$set(this.blogRenderList, this.current, blogs.data.rows)

			},
			//  当图片加载完毕，实时获取当前瀑布流的最新高度
			imageLoaded() {
				uni.createSelectorQuery().selectAll('.waterfall').boundingClientRect(res => {
					this.height = res[this.current].height
				}).exec();
			},
			async search() {
				if (!this.keyword) return uni.showToast({
					icon: "error",
					title: "搜索不能为空"
				})

				//	当搜索值不为空时，通过 navigateTo 将关键词携带到搜索页进行搜索
				uni.navigateTo({
					url: "/subpages/search/search?keyword=" + this.keyword,
					success: () => {
						//	跳转成功的话，就清空关键词
						this.keyword = null
					}
				})
			},
			// 跳转到详情页
			jump(item) {
				console.log(item.blogId);
				uni.navigateTo({
					url: `/pages/blogDetails/blogDetails?id=${item.blogId}`
				});
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		min-height: 60vh;

		.waterfall {
			padding: 0 10px;
			background-color: #F5F5F5;

			.blog-item {
				width: 95%;
				margin: 0 auto;
				margin-bottom: 12px;
				padding: 10px;
				border: 0.5px solid #c8c7cc;
				border-radius: 8px;
				box-sizing: border-box;
				box-shadow: rgba(242, 174, 39, 0.3) 0 3px 8px;
				background-color: #fff;

				.blog-author {
					margin-top: 5px;
					font-size: 14px;
				}

				image {
					width: 100%;
					border-radius: 8px;
				}
			}
		}
		::v-deep .uni-swiper-wrapper {
			background-color: #F5F5F5;
		}
	}


</style>
